<template>
	<scroll-view class="container" style="height: 100vh;">
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="inputFocus" :value="keyword"  @input="inputChange" @confirm="onKeywordConfirm" :adjust-position="false" type="text" placeholder="搜索商品名称" confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="item cu-btn shadow-blur bg-theme round"  @click="goSearch">搜索</button>
			</view>
		</view>
	    <view class="no-search" v-if="!searchStatus">
	        <view class="serach-keywords search-history" v-if="!keyword  && historyKeyword.length">
	            <view class="flex padding justify-between">
	                <text class="text-df text-black text-bold">历史记录</text>
					<view  @click="clearHistory">
						<text class="cuIcon-delete" style="font-size: 30rpx;"></text>
						<text class="text-sm text-gray">清空记录</text>
					</view>
	            </view>
	            <view class="b">
	                <view class="cu-tag round margin-bottom-sm" style="min-width: 100rpx;" @click="onKeywordTap(item)" v-for="(item,index) in historyKeyword" hover-class="navigator-hover" :key="index">{{item}}</view>
	            </view>
	        </view>
	    </view>
	    <view class="search-result" v-if=" searchStatus && goodsList.length">
	       <GoodsCard :productList="goodsList" v-model= "goodsList"></GoodsCard>
	    </view>
	    <view class="search-result-empty" v-if="!goodsList.length && searchStatus">
	        <text class="cuIcon-calendar icon text-theme" style="font-size: 60px;"></text>
	        <text class="text text-theme">没找到，换个关键字试试</text>
	    </view>
	</scroll-view>
</template>

<script>
	import * as Goods_API from '../../api/goods.js'
	import GoodsCard from "../component/GoodsCard.vue" 
	import { RegExp } from "@/utils/index.js" 
	export default {
		components:{
			GoodsCard
		},
		data() {
				return {
					keyword: '',
			        searchStatus: false,
			        goodsList: [],
			        helpKeyword: [],
			        historyKeyword: uni.getStorageSync('historyKeyword'),
			        currentSortType: 'default',
			        currentSortOrder: 'desc',
			        salesSortOrder:'desc',
			        categoryId: 0,
				}
			},
			onLoad(options) {
			  if (options.id)
			  {
			    this.id = options.id
			  }
			},
			watch:{
				keyword(newVal){
					this.keyword = newVal
				}
			},
			methods:{
			//事件处理函数
			    closeSearch() {
			        uni.navigateBack()
			    },
			    clearKeyword() {
			        this.keyword = ''
			        this.searchStatus = false
			     },
			    inputChange(e) {
			        this.keyword = e.detail.value
			        this.searchStatus = false
			    },   
			    inputFocus(e) {
			        this.searchStatus = false
			        this.goodsList = []
			    },
			    clearHistory () {
			        this.historyKeyword =  []
					uni.removeStorageSync('historyKeyword')
			    },
			    getGoodsList() {
			    	this.searchStatus = true
			        let shop_id = uni.getStorageSync('shop_id') || 2
			        let params = {
			        	shop_id : shop_id,
			        	keyword: this.keyword
			        }
			        Goods_API.goodsLableSearch(params).then(res =>{
			        	this.goodsList = res
			        })
			    },
			    onKeywordTap(keyword) {
					if(keyword){
						this.getSearchResult(keyword)
					}
			    },
			    getSearchResult(keyword) {
					this.keyword =  keyword
					this.page = 1
					this.categoryId = 0
					this.goodsList = []
					this.getGoodsList()
					let historyKeywordList = this.historyKeyword||[]
					let check = true
					historyKeywordList.map(item =>{
						if(item===keyword){
							check = false
						}
					})
					if(check){
						if(historyKeywordList.length>8){
							historyKeywordList.pop()
						}
						historyKeywordList.unshift(keyword)
						uni.setStorageSync('historyKeyword',historyKeywordList)
					}
			    },    
			    openSortFilter(event) {
			    	// console.log('openSortFilter',event)
			        let currentId = event.currentTarget.id;
			        switch (currentId) {
			            case 'salesSort':
			                let _SortOrder = 'asc'
			                if (this.salesSortOrder === 'asc') {
			                    _SortOrder = 'desc'
			                }
			                this.currentSortType = 'sales'
			                this.currentSortOrder = 'asc'
			                this.salesSortOrder = _SortOrder
			                this.getGoodsList();
			                break;
			            case 'priceSort':
			                let tmpSortOrder = 'asc';
			                if (this.currentSortOrder == 'asc') {
			                    tmpSortOrder = 'desc';
			                }
			                this.currentSortType = 'price'
			                this.currentSortOrder = tmpSortOrder
			                this.salesSortOrder = 'asc'
			                this.getGoodsList();
			                break;
			            default:
			                //综合排序
			                this.currentSortType = 'default'
			                this.currentSortOrder = 'desc'
			                this.salesSortOrder = 'desc'
			                this.getGoodsList();
			        }
			    },
			    onKeywordConfirm(event) {
					let keyword = event.detail.value.replace(/\s+/g,"")
					if(!keyword &&  keyword=== ''){
						uni.showToast({
							title:'请输入关键词进行搜索',
							icon:'none'
						})
						this.searchStatus = false
					}else{
						this.getSearchResult(event.detail.value)
					}
			    },
				goSearch(){
					let keyword = this.keyword.replace(/\s+/g,"")
					if(!keyword &&  keyword=== ''){
						uni.showToast({
							title:'请输入关键词进行搜索',
							icon:'none'
						})
						this.searchStatus = false
					}else{
						this.getSearchResult(this.keyword)
					}
				}
			}
	}
</script>

<style lang="scss">
.container {
    height: 100vh;
    background-color: #fff;
}

.search-header {
    position: fixed;
    top: 0;
    width: 750upx;
    height: 92upx;
    display: flex;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    padding: 0 24upx;
    font-size: 29upx;
    color: #333;
    box-sizing: border-box;
    align-items: center;
    z-index: 999;
}

.search-header .input-box {
    position: relative;
    margin-bottom: 10upx;
    float: left;
    width: 0;
    flex: 1;
    height: 70upx;
    line-height: 70upx;
    padding: 0 20upx;
    background: #fafafa;
}

.search-header .icon-search {
    position: absolute;
    top: 18upx;
    left: 20upx;
    width: 30upx;
    height: 30upx;
}
.search-header .del {
    position: absolute;
    top: 18upx;
    right: 18upx;
    width: 34upx;
    height: 34upx;
    z-index: 10;
}

.search-header .keywrod {
    position: absolute;
    top: 0;
    left: 40upx;
    width: 506upx;
    height: 70upx;
    padding-left: 30upx;
}

.search-header .right {
    margin-right: 6upx;
    width: 90upx;
    height: 44upx;
    line-height: 44upx;
    float: right;
    text-align: right;
    margin-bottom: 10upx;
}

.no-search {
    height: auto;
    overflow: hidden;
    margin-top: 30upx;
}

.serach-keywords {
    background: #fff;
    width: 750upx;
    height: auto;
    overflow: hidden;
    margin-bottom: 20upx;
}

.serach-keywords .h {
    padding: 0 24upx;
    height: 90upx;
    line-height: 90upx;
    width: 100%;
    color: #999;
    font-size: 28upx;
    box-sizing: border-box;
}

.serach-keywords .title {
    display: block;
    width: 120upx;
    float: left;
}

.serach-keywords .icon {
    margin-top: 26upx;
    float: right;
    display: block;
    margin-left: 511upx;
    height: 38upx;
    width: 38upx;
}

.serach-keywords .b {
    width: 750upx;
    height: auto;
    overflow: hidden;
    padding-left: 24upx;
    box-sizing: border-box;
}

.serach-keywords .item {
    // display: inline-block;
    // height: 48upx;
    // line-height: 48upx;
    // padding: 0 15upx;
    // // border: 1px solid #999;
    // // margin: 0 24upx 24upx 0;
    // font-size: 24upx;
    // color: #333;
	margin-bottom: 20px;
}

.serach-keywords .item.active {
    color: #ff3456;
    border: 1px solid #ff3456;
}

.shelper-list {
    width: 750upx;
    height: auto;
    overflow: hidden;
    background: #fff;
    padding: 0 31.25upx;
}

.shelper-list .item {
    height: 93upx;
    width: 687.5upx;
    line-height: 93upx;
    font-size: 24upx;
    color: #333;
    border-bottom: 1px solid #f4f4f4;
}

.sort {
    position: fixed;
    top: 91upx;
    background: #fff;
    width: 100%;
    height: 78upx;
    z-index: 999;
}

.sort-box {
    background: #fff;
    width: 100%;
    height: 78upx;
    overflow: hidden;
    padding: 0 30upx;
    display: flex;
    border-bottom: 1px solid #fafafa;
    box-sizing: border-box;
}

.sort-box .item {
    height: 78upx;
    line-height: 78upx;
    flex: 1;
    color: #333;
    font-size: 30upx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sort-box .item .txt {
    display: block;
    height: 100%;
    margin-right: 8upx;
    color: #333;
}

.sort-box .item.active .txt {
    color: #ff3456;
}

.sort-box .item .icon{
    width: 15upx;
    height: 21upx;
}

.sort-box-category {
    background: #fff;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 40upx 40upx 0 0;
    border-bottom: 1px solid #f1f1f1;
    z-index: 99;
}

.sort-box-category .item {
    height: 54upx;
    line-height: 54upx;
    text-align: center;
    float: left;
    padding: 0 16upx;
    margin: 0 0 40upx 40upx;
    border: 1px solid #666;
    color: #333;
    font-size: 24upx;
}

.sort-box-category .item.active {
    color: #ff3456;
    border: 1px solid #ff3456;
}

.cate-item {
    margin-top: 172upx;
    height: auto;
    overflow: hidden;
    background: #fff;
}

.price .goods-price {
    width: 100upx;
    height: 30upx;
    line-height: 30upx;
    text-align: center;
    font-size: 30upx;
}

.price .goods-price-original {
    color: #999;
    height: 30upx;
    font-size: 26upx;
    float: left;
    line-height: 30upx;
    text-decoration: line-through;
}

.search-result-empty {
    width: 100%;
    height: 100vh;
    padding-top: 300upx;
}

.search-result-empty .icon {
    margin: 0 auto;
    display: block;
    width: 128upx;
    height: 128upx;
}

.search-result-empty .text {
    display: block;
    width: 100%;
    height: 40upx;
    font-size: 28upx;
    text-align: center;
    margin-top: 20upx;
}

.no-more {
    height: 100upx;
    line-height: 100upx;
    text-align: center;
    font-size: 28upx;
    color: #999;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.list-wrap {
    display: block;
    width: 100%;
    padding: 24upx;
    height: auto;
    box-sizing: border-box;
}

.list-wrap .goods-box {
    width: 338upx;
    /* height: 330upx; */
    float: left;
    margin: 0 20upx 20upx 0;
}

.list-wrap .no-margin {
    margin-right: 0;
}

.goods-box .navi-url {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.goods-box .navi-url .image {
    width: 338upx;
    height: 338upx;
    border-radius: 4upx;
    background-color: #f9f9f9;
}

.goods-box .navi-url .box {
    height: 338upx;
    width: 338upx;
    position: relative;
    margin-bottom: 10upx;
}

.goods-box .navi-url .box .new-tag {
    height: 36upx;
    width: 60upx;
    background: #ca2a1d;
    position: absolute;
    top: 20upx;
    left: 0;
    line-height: 36upx;
    text-align: center;
    font-size: 18upx;
    color: #fff;
    border-radius: 0 40upx 40upx 0;
}

.goods-box .navi-url .goods-info .goods-title {
    font-size: 26upx;
    color: #222;
    margin-bottom: 6upx;
    /* height: 64upx; */
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; */
}

.goods-box .navi-url .goods-info .goods-intro {
    font-size: 22upx;
    color: #888;
    margin-bottom: 6upx;
    /* height: 64upx; */
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.goods-box .navi-url .goods-info .price-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.goods-box .navi-url .goods-info .price-container .l {
    display: flex;
    flex-direction: column;
    /* width: 250upx; */
}

.goods-box .navi-url .goods-info .price-container .r {
    width: 46upx;
    height: 46upx;
}

.goods-box .navi-url .goods-info .price-container .r .cart-img {
    width: 46upx;
    height: 46upx;
}

.goods-box .navi-url .goods-info .price-container .l .h {
    font-size: 26upx;
    color: #ff3456;
    font-weight: 500;
}

.goods-box .navi-url .goods-info .price-container .l .b {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.goods-box .navi-url .goods-info .price-container .l .no-level {
    font-size: 28upx;
    color: #e00000;
}

.goods-box .navi-url .goods-info .price-container .l .b .price-w {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.goods-box .navi-url .goods-info .price-container .l .b .price-t {
    font-size: 26upx;
    color: #e00000;
    margin-right: 6upx;
}

.goods-box .navi-url .goods-info .price-container .l .b .price-tag {
    border: 1upx solid #e00000;
    color: #e00000;
    background: #ffeaea;
    border-radius: 100upx;
    padding: 0 6upx;
    font-size: 14upx;
    text-align: center;
    line-height: 22upx;
    height: 22upx;
}

.goods-box .navi-url .goods-info .price-container .retail-price {
    font-size: 18upx;
    color: #000;
    margin-bottom: 4upx;
}

.no-goods-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 338upx;
    height: 338upx;
    background: #000;
    opacity: 0.3;
}

.sold-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 338upx;
    height: 338upx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.soldout {
    height: 180upx;
    width: 180upx;
}

</style>
